<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>zVisualizer Bookmarklet</title></head>
<style type="text/css">
body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif"; 
	background-color: #777;
	padding: 30px 30px; 
}
h1 {
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
	background-color:#5191B3;
	color:white;
	margin: 0;
	padding: 5px 5px 5px 10px;
	font-size:25px;
}
#wrap {
	background-color: #F1EDED;
	height:300px;
	width:500px;
	padding: 5px 5px 0 5px;
	text-align:center;
	-moz-border-radius: 8px; -webkit-border-radius: 8px;
}
#bookmarklet {
	display:block;
	background-color: #F6F6F6;
	height:60px;
	width:200px;
	text-align: center;
	line-height:55px;
	border:1px solid #CCCCCC;
	font-size: 22px;
	color: black;
	text-decoration: underline;
	margin: 0 auto 25px;
	-moz-border-radius: 4px ; 
	-webkit-border-radius: 4px ;
}
a#bookmarklet:hover {
	border:1px solid #5191B3;
	background-color: #E0EAEF;
}
p.texttop {
	font-size: 15px;
	text-align:left;
	padding-left:10px;
	margin: 15px 0 30px 0;
}
p.textbottom { 
	font-style: italic; 
	font-size: 14px;
	margin:0;
}

div.A, div.B, div.C { width: 120px; height: 120px; position: absolute; padding: 10px;}
div.A2, div.B2 {  height: 55px; position: absolute;padding: 10px;}
div.A { background-color: #BFBFBF; top: 80px; left: 600px; z-index:1;}
div.A2 { background-color:#9F9595; left:25px;top:50px; border:1px dashed #5F5959; z-index:10; width: 80px;}
div.B { background-color: #DFDFDF; top: 120px; left: 650px; text-align:right;}
div.B2 { background-color: #4F4F4F; top: 95px; left: 75px; z-index:9; width: 55px;text-align:left;}
div.C { background-color: #F6F6F6; top: 160px; left: 700px;z-index:5;}

</style>

<body>

<div id="wrap">
	<h1>zVisualizer bookmarklet</h1>

	<p class="texttop">
	This bookmarklet displays the z-ordering of the elements on the page, and helps you debug z-index and stacking context issues.
	To install, simply bookmark the following link.
	</p>

	<a id="bookmarklet" onclick="document.getElementById('example').style.display='';">zVisualizer</a>

	<p class="textbottom">...or just click it to give it a try!</p>
</div>	

<div id="example" style="display:none; ">
	<div class="A">
		<span>A</span>
		<div class="A2">
			<span>A2</span>
		</div>	
	</div>
	<div class="B">
		<span>B</span>
		<div class="B2">
			<span>B2</span>
		</div>
	</div>
	<div class="C">
		<span>C</span>
	</div>
</div>


<script src="../dist/bookmarklet.min.js" type="text/javascript"></script>
	
</body>

<html>